{% extends 'common/base.html' %} {% block header %} {% endblock %} 
{% block navbarContents %}
	<li class="divider-vertical"></li>
	<li class="dropdown">	
		<a href="#" class="dropdown-toggle" data-toggle="dropdown">Quick Start</a>
				
							<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
							<div class="container-fluid">
							<h5>Select a data set to analyze</h5>
							<table style="td{width:33.3%}" id="demo_list" class="table table-bordered">
							<thead><tr><th>TF</th><th>Cell Line</th><th>Reference</th><th>File Type</th><th></th></tr></thead>
							<tr id="Oct4H1"><td >Oct4</td><td>H1</td><td><a target="_blank" href="http://www.ncbi.nlm.nih.gov/pubmed/?term=Transposable+elements+have+rewired+the+core+regulatory+network+of+human+embryonic+stem+cells.">Kunarso et al, 2010</a></td><td>FASTQ</td><td><input type="radio" name='demo_data' value="Oct4H1"></td></tr>
							<tr id="cMycH2171"><td >cMyc</td><td>H2171</td><td><a target="_blank" href="http://www.ncbi.nlm.nih.gov/geo/query/acc.cgi?acc=GSE41105">GEO GSE41105, 2012</a></td><td>Summits BED</td><td><input type="radio" name='demo_data' value="cMycH2171"></td></tr>
 							<tr id="treatedtest"><td >Test</td><td>-</td><td><a target="_blank" href="#">Quick Test</a></td><td>Summits BED</td><td><input type="radio" name='demo_data' value="treated"></td></tr>  
							</table>
							<button class='btn btn-danger' onclick='submitDemoJob()'>Submit Job</button>
							</div>							
							</ul>

	</li>
	<script>

	function submitDemoJob(){
	 var dname=$("input[type='radio']:checked").val()
	 var postdata = "dataset=" + dname;	
	 	
			$.ajax({   
	        type: "POST",
	        url: "/peakAnalyzer/regular/runDemo/", 
	        data: postdata,      
	        dataType:'text',   
	        success: function(data, textStatus){
	        		window.alert(data);
	        		$("#joblist_container").load("/peakAnalyzer/jobserver-regular/{{ user.id }}/listjob");
			}
		})
	}
	</script>
	
{% endblock %}
{% block content %}

<script type="text/javascript">

//refresh job list

 $(document).ready(function() {
 	 $("#joblist_container").load("/peakAnalyzer/jobserver-regular/{{ user.id }}/listjob");
   var secs=60000*3
   var refreshId = setInterval(function() {
      $("#joblist_container").load("/peakAnalyzer/jobserver-regular/{{ user.id }}/listjob");

   }, secs);
   $.ajaxSetup({ cache: false });
});

//Refresh table on click
function refresh_table(){
     $("#joblist_container").load("/peakAnalyzer/jobserver-regular/{{ user.id }}/listjob");
}



function listUploaded(filetype)
{
$.ajax({   
        type: "GET",
        url: "/peakAnalyzer/regular/listUploadedFiles",    
        dataType:'json',   
        success: function(data, textStatus){
        		var filelist=""
        		$(data[filetype]).each(function(index){
        			var filename=data[filetype][index];
        			//check if uploaded file is from basespace
        			var splitOut = filename.split("__");
        			var fname=filename;
        			if(splitOut.length>1) {
        				fid=splitOut[0]
  						fname="file__" + fid;
  						filename=fid+"_" + splitOut[1];
       				}
       
        		 	var file='<li id='+ fname +' onclick="add_list(this)">' + filename+'</li>';
     				filelist=filelist+file;
     				
        });
        		
				$("#"+filetype).html(filelist);        	
	}})
}

function getImgList(){
alert("got into function");
$.ajax({   
        type: "GET",
        url: "/peakAnalyzer/regular/jobManagement",    
        dataType:'json',   
        success: function(data, textStatus){
        		var filelist=""
        		$(data).each(function(index){
        			var filename=data[index];
        			alert(filename);
       			
     
        });
        
     }});
}
$("#icon-toggle").click(function(){
$("i #closedfolder").toggle(
function(){
	$(this).class="icon-folder-open";
},
function(){
	$(this).class="icon-folder-close";
}
);
});



addedFiles={};
function add_list(trigger_obj)
{
var name=trigger_obj.innerHTML
if(!addedFiles.hasOwnProperty(name))
{
var fid=trigger_obj.id.split("__")[1]

if (fid){
var html="<tr><td>\
<select id=cb__"+fid+" name=cb__"+fid+"> \
  <option>Sample</option> \
  <option>Control</option>\
  <option>Delete</option>\
 </select>\
 </td><td>"+name+"</td></tr>";
 }else{
 var html="<tr id="+"row_"+name+"><td>\
<select id=up__"+name+" name=up__"+name+"> \
  <option>Sample</option> \
  <option>Control</option>\
 </select>\
 </td><td>"+name+"</td>\
 <td style='border-left:0px;text-align:right;'><i id='del_"+name+"' class='icon-remove' onclick='deleteFromJobTable(this)'></i></td></tr>";
 }
     $("#datalists").append(html);
     $("#inputGenome").attr("placeholder",trigger_obj.getAttribute('genome'));
     addedFiles[name]=true;
     console.log(JSON.stringify(addedFiles));
}
}

 function deleteFromJobTable(element){
 	var name=element.id.split("del_")[1];
  	var row=document.getElementById("row_"+name);
 	row.parentNode.removeChild(row);
 	delete addedFiles[name]; 	
 }
 
function test()
{
 var postdata = "";
 var ctrl_ids="";
 var sample_ids="";
 $("*[name*='cb__']").each(function(i) {
                if ($(this).val() =="Control") {
                        line = $(this).attr("name");
                        ctrl_ids += line.split("__")[1] + ',';
                }
                else if($(this).val() =="Sample") 
                {
                	 line = $(this).attr("name");
                        sample_ids += line.split("__")[1] + ',';
                }
        });
postdata+='ctrl_ids='+ctrl_ids;
postdata+='&sample_ids='+sample_ids;
postdata+='&inputTitle='+$('#inputTitle').val() ;
postdata+='&inputGenome='+$('#inputGenome').val() ;    
window.alert(postdata);

}

function submit_job()
{

 var postdata = "";
 var ctrl_ids="";
 var sample_ids="";
 $("*[name*='cb__'],*[name*='up__'] ").each(function(i) {
                if ($(this).val() =="Control") {
                        line = $(this).attr("name");
                        ctrl_ids += line.split("__")[1] + ',';
                }
                else if($(this).val() =="Sample") 
                {
                	 line = $(this).attr("name");
                        sample_ids += line.split("__")[1] + ',';
                }
        });
postdata+='ctrl_ids='+ctrl_ids;
postdata+='&sample_ids='+sample_ids;
postdata+='&inputTitle='+$('#inputTitle').val() ;
postdata+='&inputGenome='+$('#select_inputGenome').val() ;    
postdata+='&inputCell='+$('#inputCell').val() ;   


		$.ajax({   
        type: "POST",
        url: "/peakAnalyzer/regular/submitJob/", 
        data: postdata,      
        dataType:'text',   
        success: function(data, textStatus){
        		window.alert(data);
        		$("#joblist_container").load("/peakAnalyzer/jobserver-regular/{{ user.id }}/listjob");
		}
	})
}



</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/../peakAnalyzer/static/fileUpload/js/vendor/jquery.ui.widget.js"></script>
<script src="/../peakAnalyzer/static/fileUpload/js/jquery.iframe-transport.js"></script>
<script src="/../peakAnalyzer/static/fileUpload/js/jquery.fileupload.js"></script>
<script src="/../peakAnalyzer/static/fileUpload/js/jquery.fileupload-ui.js"></script>        
 <script>
 
function getReadableFileSizeString(fileSizeInBytes) {

    var i = -1;
    var byteUnits = [' KB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB'];
    do {
        fileSizeInBytes = fileSizeInBytes / 1024;
        i++;
    } while (fileSizeInBytes > 1024);

    return Math.max(fileSizeInBytes, 0.1).toFixed(1) + byteUnits[i];
};
</script> 
<script>
$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
       add: function (e, data) {
        
        $.each(data.files, function (index, file) {

                var row =$('<tr id="tr_' +file.name +'" />');
                 $('<td id="td_' + file.name+ '" class="name"/>').text(file.name).appendTo(row);
 				var fsize=$('<td>'+ getReadableFileSizeString(file.size) + '</td>');
 				fsize.appendTo(row);
 				var prog=$('<td><div id="progress_indv" class="progress progress-info progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div></td>');
            	prog.appendTo(row);
                var button=$('<td class="cancel"> <button type="reset" id="button.cancel_'+ file.name+'" class="btn btn-warning cancel"><i class="icon-ban-circle icon-white"></i></button></td>');
         //       button.appendTo(row);
               
           		var status=$('<td></td>');
           		status.appendTo(row);
               row.appendTo($("#localfile_list table"));


        
        var jqXHR = data.submit()
            .success(function (result, textStatus, jqXHR) {/* ... */})
            .error(function (jqXHR, textStatus, errorThrown) {
            if (errorThrown === 'abort') {
       //     alert('File Upload has been canceled');
                	 var row= document.getElementById("tr_" + file.name);
                	row.parentNode.removeChild(row);
        	}
            })
            .complete(function (result, textStatus, jqXHR) {/* ... */});
            
       	$('button.cancel').click(function (e) {
    		jqXHR.abort();

		});
            
    		});
        },
         done: function (e, data) {
           $.each(data.result.files, function (index, file) {
          	 var row= document.getElementById("tr_" + file.name);
        	//var fsize='<td>'+ getReadableFileSizeString(file.size) + '</td>';
        	var fname='<td>'+ file.name + '</td>';
        	var status='<td colspan="2"><span class="label label-success"> Uploaded!</span></td>';
         	row.innerHTML=fname+status;
    		
    	      });
           
            
        },
        progress: function(e,data){
                $.each(data.files, function (index, file) {
         
            var progress = parseInt(data.loaded / data.total * 100, 10);
  
        $('#progress_indv .bar').css(
            'width',
            progress + '%'
        );
        });
        },
       	progressall: function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress_glob .bar').css(
            'width',
            progress + '%'
        );
    }
        
      
    });
});

$('#fileupload').bind('fileuploadprogress', function (e, data) {
    // Log the current bitrate for this upload:
    console.log(data.bitrate);
});


     </script> 
<head>
<!-- Generic page styles -->
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
<link rel="stylesheet" href="/../peakAnalyzer/static/fileUpload/css/jquery.fileupload-ui.css">
<!-- CSS adjustments for browsers with JavaScript disabled -->
<noscript><link rel="stylesheet" href="/../peakAnalyzer/static/fileUpload/css/jquery.fileupload-ui-noscript.css"></noscript>
             
               
</head>
  
<div class="row-fluid">

<div class="span3">
<li class="nav-header"><a href="#"><i
class="icon-home icon-white"></i> <i class="icon-user"></i>{{ user.username }}</a>
</li>
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
{% for project in projects_list %}
	<li class="nav-header"><i class="icon-book"></i>{{ project.Name }}</li>
	<!--
	<div id='demo'>
	<hr>Demo</hr>
	<br></br>
	<a href="#demo_modal" role="button" class='btn btn-primary' data-toggle="modal">Try an Example</a>
	<div id="demo_modal" class="modal hide fade">
		<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h3>Demo </h3>
		</div>
		<div class="modal-body">
		</div>
	</div>
	</div>
	 -->
	 <hr>Local Files</hr>
	 <br></br>
	 <div id="localfile_list">

    <div class="fileupload-loading"></div>
    <a href="#modal_table" role="button" class="btn btn-success" data-toggle="modal">Upload Files <i class="icon-upload icon-white"></i></a>

	<div id="modal_table" class="modal hide fade" >
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
		<h3>Upload Files </h3>
	</div>
	<div class="modal-body">
    <!-- The file upload form used as target for the file upload widget -->
    <form id="fileupload" action="/peakAnalyzer/regular/uploadFiles/" method="POST" enctype="multipart/form-data">
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div  class="row fileupload-buttonbar">
    
                <!-- The fileinput-button span is used to style the file input field as button -->
                <div style="padding-left:20px;">
                <span class="btn btn-primary fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Add files...</span>
                    <input type="file" name="files[]" multiple>
                </span>
                </div>
                <button type="reset" class="btn btn-danger cancel">
                    <i class="icon-ban-circle icon-white"></i>
                    <span>Cancel upload</span>
                </button>

            </div>
            <!-- The global progress information -->
	    <div class="fileupload-progress fade" >
                <!-- The global progress bar -->
                <div id="progress_glob" class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="bar" style="width:0%;height:18px;"></div>
                </div>
            </div>
 
        <!-- The loading indicator is shown during file processing -->
        <!-- The table listing the files available for upload/download -->
        <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

</form>
</div>
</div>
<br>

</div>
                <!-- end of file upload div -->
      <hr>Uploaded Files</hr>   
      <div id=uploadedfile_list>
      
      <script>
      filetypes=["bed","bam", "sam","fasta", "fastq"];
      for(var i=0; i<filetypes.length; i++)
      {
      document.write('<li><a id="icon-toggle" class="accordion-toggle" data-toggle="collapse" data-target="#' + filetypes[i] + '" href="#' + filetypes[i] + '" onclick=listUploaded("' +filetypes[i]+ '") ><i id="closedfolder" class="icon-folder-close"></i>' + filetypes[i] + '</a></li>');
      document.write("<div id="+ filetypes[i]+ " class='collapse' > Loading..</div>");
      }
      
      </script>
     
	  </div>
	
{% endfor %}
            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        
 <div class="span9" style="padding-top:25px">
         
          <form class="form-horizontal" id="form_jobdata" >
          <table  class="table table-bordered" id=datalists>
          <tr><td> <label class="control-label" for="inputTitle">Job Title</label> </td> <td colspan="2"><input type="text" id="inputTitle" name="inputTitle" placeholder="Job Title"></td></tr>
          <tr><td> <label class="control-label" for="inputGenome">Reference Genome</label> </td> <td colspan="2"> 
          <select id= select_inputGenome> 
  			<option value="hg19">Human: GRCh37 (hg19)</option> 
  			<option value="hg18">Human: NCBI build 36.1 (hg18)</option>
 			</select></td></tr>
         <tr><td> <label class="control-label" for="inputCell">Cell Type</label> </td> <td colspan="2"><input type="text" id="inputCell" name="inputCell" placeholder="Cell"></td></tr>
         
         <tr><td>Data Type</td><td colspan="2">File Name</td></tr>
          
          </table>
        
	   <button class="btn btn-danger" type="button" onclick="submit_job()">Submit Job</button>
          </form>
	  
          
  </div><!--/span-->

   <div class="span9" id="joblist_container">
   
   </div>
 </div><!--/row-->
 
{% block modal %}
{% endblock %}

{% endblock %}
